/** 
 * created by zhangyanling.
 * 登录页
*/
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { loginUser } from './action'
// import 
import '@/common/css/login.less';

// unescape(str.replace(/\\u/g, '%u')) unicode码解码

const mapStateToProps = state => ({
	auth: state
});

const mapDispatchToProps = dispatch => bindActionCreators({
	loginUser: loginUser
}, dispatch);

class LoginPage extends Component {
	constructor(props) {
		super(props);	
		this.state = {
            errMsg: ''
        }
    }

    loginSubmit = (e) => {
        e.preventDefault()
        const username = this.refs.username
        const password = this.refs.password
        if(!username.value.trim()){
            this.setState({ errMsg: '账号不能为空'})
        }else if(!password.value.trim()){
            this.setState({ errMsg: '密码不能为空'})
        }else{
            this.setState({ errMsg: '' })
        }
        const creds = { username: username.value.trim(), password: password.value.trim() }
        this.props.loginUser(creds)
    }
    
    
    render() {
        const form = this.props;

        return (
            <div className="form-wrapper">
                <form className="form-box">
                    <div className="form-items">
                        <lable>账号：</lable>
                        <input type="text" placeholder="请输入账号" ref="username"/>
                    </div>
                    <div className="form-items">
                        <lable>密码：</lable>
                        <input type="password" placeholder="请输入密码" ref="password"/>
                    </div>
                    <div className="from-error">
                        <span>{this.state.errMsg}</span>
                    </div>
                    <div className="form-items">
                        <button type="submit" onClick={this.loginSubmit}>登录</button>
                    </div>
                </form>
            </div>
        )

    }
}

LoginPage.PropTypes = {
    user: PropTypes.object.isRequired,
    loginUser: PropTypes.func.isRequired
}


export default connect(mapStateToProps,mapDispatchToProps)(LoginPage);